<template>
  <div class="days-wrapper">
    <div class="days-list" v-for="(item, index) in data" :key="index">
      <div class="day-header">
        <span class="day-number">第{{ index + 1 }}天</span>
        <div class="date">{{ item.date }}</div>
        <div class="title">{{ item.title }}</div>
      </div>
      <div class="day-body">
        <div class="day-body__part" v-for="(list, i) in item.body" :key="i">
          <p class="part__title">{{ list.title }}</p>
          <div class="day-body__content" v-html="list.content"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "secDaysList",
  props: {},
  components: {},
  data() {
    return {
      data: [
        {
          date: "10月9号",
          title: "探索中国首都",
          body: [
            {
              title: "早上",
              content: `<div class="content-day-max day-itinerary-title-text" style="font-weight: 400; color: black;">Start your day with a traditional Chinese breakfast at <a href="https://www.google.com/maps/search/?api=1&amp;query=Donghuamen+Night+Market+Beijing+restaurant" target="_blank" rel="noreferrer noopener" style="color: rgb(3, 133, 30);">Donghuamen Night Market</a>. Indulge in steamed buns, fried dough sticks, and soy milk. After breakfast, visit the iconic Tiananmen Square and explore its historical significance. Don't forget to take a picture in front of the majestic Forbidden City.</div>`,
            },
            {
              title: "中午",
              content: `<div class="content-day-max day-itinerary-title-text" style="font-weight: 400; color: black;">Start your day with a traditional Chinese breakfast at <a href="https://www.google.com/maps/search/?api=1&amp;query=Donghuamen+Night+Market+Beijing+restaurant" target="_blank" rel="noreferrer noopener" style="color: rgb(3, 133, 30);">Donghuamen Night Market</a>. Indulge in steamed buns, fried dough sticks, and soy milk. After breakfast, visit the iconic Tiananmen Square and explore its historical significance. Don't forget to take a picture in front of the majestic Forbidden City.</div>`,
            },
            {
              title: "晚上",
              content: `<div class="content-day-max day-itinerary-title-text" style="font-weight: 400; color: black;">Start your day with a traditional Chinese breakfast at <a href="https://www.google.com/maps/search/?api=1&amp;query=Donghuamen+Night+Market+Beijing+restaurant" target="_blank" rel="noreferrer noopener" style="color: rgb(3, 133, 30);">Donghuamen Night Market</a>. Indulge in steamed buns, fried dough sticks, and soy milk. After breakfast, visit the iconic Tiananmen Square and explore its historical significance. Don't forget to take a picture in front of the majestic Forbidden City.</div>`,
            },
          ],
        },
        {
          date: "10月9号",
          title: "探索中国首都",
          body: [
            {
              title: "早上",
              content: `<div class="content-day-max day-itinerary-title-text" style="font-weight: 400; color: black;">Start your day with a traditional Chinese breakfast at <a href="https://www.google.com/maps/search/?api=1&amp;query=Donghuamen+Night+Market+Beijing+restaurant" target="_blank" rel="noreferrer noopener" style="color: rgb(3, 133, 30);">Donghuamen Night Market</a>. Indulge in steamed buns, fried dough sticks, and soy milk. After breakfast, visit the iconic Tiananmen Square and explore its historical significance. Don't forget to take a picture in front of the majestic Forbidden City.</div>`,
            },
            {
              title: "中午",
              content: `<div class="content-day-max day-itinerary-title-text" style="font-weight: 400; color: black;">Start your day with a traditional Chinese breakfast at <a href="https://www.google.com/maps/search/?api=1&amp;query=Donghuamen+Night+Market+Beijing+restaurant" target="_blank" rel="noreferrer noopener" style="color: rgb(3, 133, 30);">Donghuamen Night Market</a>. Indulge in steamed buns, fried dough sticks, and soy milk. After breakfast, visit the iconic Tiananmen Square and explore its historical significance. Don't forget to take a picture in front of the majestic Forbidden City.</div>`,
            },
            {
              title: "晚上",
              content: `<div class="content-day-max day-itinerary-title-text" style="font-weight: 400; color: black;">Start your day with a traditional Chinese breakfast at <a href="https://www.google.com/maps/search/?api=1&amp;query=Donghuamen+Night+Market+Beijing+restaurant" target="_blank" rel="noreferrer noopener" style="color: rgb(3, 133, 30);">Donghuamen Night Market</a>. Indulge in steamed buns, fried dough sticks, and soy milk. After breakfast, visit the iconic Tiananmen Square and explore its historical significance. Don't forget to take a picture in front of the majestic Forbidden City.</div>`,
            },
          ],
        },
        {
          date: "10月9号",
          title: "探索中国首都",
          body: [
            {
              title: "早上",
              content: `<div class="content-day-max day-itinerary-title-text" style="font-weight: 400; color: black;">Start your day with a traditional Chinese breakfast at <a href="https://www.google.com/maps/search/?api=1&amp;query=Donghuamen+Night+Market+Beijing+restaurant" target="_blank" rel="noreferrer noopener" style="color: rgb(3, 133, 30);">Donghuamen Night Market</a>. Indulge in steamed buns, fried dough sticks, and soy milk. After breakfast, visit the iconic Tiananmen Square and explore its historical significance. Don't forget to take a picture in front of the majestic Forbidden City.</div>`,
            },
            {
              title: "中午",
              content: `<div class="content-day-max day-itinerary-title-text" style="font-weight: 400; color: black;">Start your day with a traditional Chinese breakfast at <a href="https://www.google.com/maps/search/?api=1&amp;query=Donghuamen+Night+Market+Beijing+restaurant" target="_blank" rel="noreferrer noopener" style="color: rgb(3, 133, 30);">Donghuamen Night Market</a>. Indulge in steamed buns, fried dough sticks, and soy milk. After breakfast, visit the iconic Tiananmen Square and explore its historical significance. Don't forget to take a picture in front of the majestic Forbidden City.</div>`,
            },
            {
              title: "晚上",
              content: `<div class="content-day-max day-itinerary-title-text" style="font-weight: 400; color: black;">Start your day with a traditional Chinese breakfast at <a href="https://www.google.com/maps/search/?api=1&amp;query=Donghuamen+Night+Market+Beijing+restaurant" target="_blank" rel="noreferrer noopener" style="color: rgb(3, 133, 30);">Donghuamen Night Market</a>. Indulge in steamed buns, fried dough sticks, and soy milk. After breakfast, visit the iconic Tiananmen Square and explore its historical significance. Don't forget to take a picture in front of the majestic Forbidden City.</div>`,
            },
          ],
        },
      ],
    };
  },
  computed: {},
  mounted() {},
  methods: {},
  watch: {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.days-wrapper {
  margin-top: 80px;
  padding-bottom: 40px;
}
.days-list {
  display: flex;
  padding: 0 2rem;
  .day-header {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 42%;
    align-items: center;
    .day-number {
      color: $theme-color;
      font-size: 2.7rem;
      text-transform: uppercase;
    }
    .date {
      display: flex;
      font-weight: 600;
      gap: 5px;
      align-items: center;
      text-transform: capitalize;
      color: black;
    }
    .title {
      color: $theme-color;
      font-size: 1.1rem;
      font-weight: 600;
      text-align: center;
    }
  }
  .day-body {
    width: 58%;
    max-width: 360px;
    margin-top: 10px;
    .day-body__part {
      margin-bottom: 20px;
    }
    .part__title {
      font-weight: 600;
      font-size: 16px;
    }
    .day-body__content {
      color: blank;
      font-size: 14px;
      line-height: 20px;
    }
  }
}
</style>
